
    <div class="container-fluid">
        <ul class="list-group" id="joblist">
    </div>


    <script type="text/javascript">

    function showLiveJobStatus (response) {
        var li = '<div class="row">';
        li += '<div class="col-md-12">';
        li += '<a href="/admin/jobmanage.html?name=';
        if (response.result == "success") {
            var job = response.data;
            li += job.name + '"><h3>' + job.name + '</h3></a>';
            li += ' <span class="joblist" data-i18n="joblist.Restart times"></span> ' + job.age;
            li += ', <span class="joblist" data-i18n="joblist.Last time started"></span> ' + job.last_start_time;
            li += '</br><h4 class="joblist" data-i18n="joblist.Encoder counts"></h4>:' + job.encoder_count;
            li += ' <h4 class="joblist" data-i18n="joblist.Average CPU usage"></h4>:' + job.cpu_average;
            li += ' <h4 class="joblist" data-i18n="joblist.Memory usage"></h4>:' + job.memory;
            li += '<button class="btn btn-warning pull-right joblist" id="job_' + job.name + '" onclick="stopJob(\'' + job.name + '\')" data-i18n="joblist.Stop Job">';
            li += '</button>';
            li += '</div>';
            $('#li_' + job.name).html(li);
        } else {
            var job = response;
            li += job.name + '"><h3>' + job.name + '</h3></a>';
            li += ' <span class="joblist" data-i18n="joblist.The job is not started"></span>';
            li += '<button class="btn btn-primary pull-right joblist" id="job_' + job.name + '" onclick="startJob(\'' + job.name + '\')" data-i18n="joblist.Start Job">';
            li += '</button>';
            li += '</div>';
            $('#li_' + job.name).html(li);
        }
        $(".joblist").i18n ();
    }

    function showNonliveJobStatus (response) {
        var li = '<div class="row">';
        li += '<div class="col-md-12">';
        if (response.result == "success") {
            var job = response.data;
            li += '<h3>' + job.name + '</h3>';
            li += ', <span class="joblist" data-i18n="joblist.Start Time"></span> ' + job.last_start_time;
            li += '</br><h4 class="joblist" data-i18n="joblist.Encoder counts"></h4>:' + job.encoder_count;
            li += ' <h4 class="joblist" data-i18n="joblist.Average CPU usage"></h4>:' + job.cpu_average;
            li += ' <h4 class="joblist" data-i18n="joblist.Memory usage"></h4>:' + job.memory;
            li += '<button class="btn btn-warning pull-right joblist" id="job_' + job.name + '" onclick="cancelJob(\'' + job.name + '\')" data-i18n="joblist.Cancel Job">';
            li += '</button>';
            li += '</div>';
            $('#li_' + job.name).html(li);
        }
        $(".joblist").i18n ();
    }

    function startJob (name) {
        $.get ("/admin/getjob/" + name, function (data) {
            if (data.result == "failure") {
                alert (data.reason);
                return;
            }

            var job = JSON.stringify (data.data, null, 4);

            $.post ("/admin/start", job, function (response) {
                if (response.result == "success") {
                    alert ('start ' + name + ' ' + response.result);
                    var jobStatUrl = '/stat/gstreamill/job/' + response.name;
                    $.get(jobStatUrl, function (response) {
                        showLiveJobStatus (response);
                    });

                } else {
                    alert (response.result + "\n" + response.reason);
                }
            });
        });
    }

    function stopJob (name) {
        $.get ("/admin/stop/" + name, function (response) {
            if (response.result == "success") {
                alert ('stop ' + response.name + ' ' + response.result);
                var jobStatUrl = '/stat/gstreamill/job/' + response.name;
                $.get(jobStatUrl, function (response) {
                        console.log (response);
                    showLiveJobStatus (response);
                });

            } else {
                alert (response.result + "\n" + response.reason);
            }
        });
    }

    function cancelJob (name) {
        $.get ("/admin/stop/" + name, function (response) {
            if (response.result == "success") {
                alert ('Cancel ' + response.name + ' ' + response.result);
                var jobStatUrl = '/stat/gstreamill/job/' + response.name;
                $.get(jobStatUrl, function (response) {
                    location.reload ();
                });

            } else {
                alert (response.result + "\n" + response.reason);
            }
        });
    }

    $(document).ready(function () {
        $.get("/admin/getconf", function (data) {
            if (data.result == "success") {
                Document.GstreamillConf.conf = data.data;
            } else {
                alert ("get configure failure: " + data.reason);
                return;
            }

            $.get("/admin/listlivejob", function (jobs) {
                for (var i = 0; i < jobs.length; i++) {
                    var li = '<li class="list-group-item" id="li_' + jobs[i] + '"></li>';
                    $('#joblist').append(li);
                    var jobStatUrl = '/stat/gstreamill/job/' + jobs[i];
                    $.get(jobStatUrl, function (response) {
                        showLiveJobStatus (response);
                    });
                }
            });

            $.get("/admin/listnonlivejob", function (jobs) {
                for (var i = 0; i < jobs.length; i++) {
                    var li = '<li class="list-group-item" id="li_' + jobs[i] + '"></li>';
                    $('#joblist').append(li);
                    var jobStatUrl = '/stat/gstreamill/job/' + jobs[i];
                    console.log (jobStatUrl);
                    $.get(jobStatUrl, function (response) {
                        showNonliveJobStatus (response);
                    });
                }
            });

            $.i18n.init({
                lng: Document.GstreamillConf.language[Document.GstreamillConf.conf.language]
            }, function(t) {
                $(".nav").i18n ();
            });
        });
    });

    </script>
